<template>
  <div class="hmbtn" @click="emit('add', 1)">hmbtn{{ props.msg }}</div>
  <button @click="emit('update:modelValue', 100)">
    v-model   {{ props.modelValue }}
  </button>
</template>

<script lang="ts" setup>
  const fn = () => {
    alert(props.msg)
  }

  interface Props {
    msg:String,
    modelValue:Number
  }
  const props =  defineProps<Props>()
  defineExpose({
    fn,
  })
  interface Emits {
    (name: 'add', num:number): void,
    (name: 'update:modelValue', num:number): void
  }
  const emit = defineEmits<Emits>()
</script>

<style scoped></style>